<template>
  <div class="list-page" style="padding:10px">
    <!-- 操作组 -->
    <div class="header-bar">
      <ButtonGroup class="float-left">
        <Button v-if="$priv('platform.user.add')" icon="h-icon-plus" @click="add">添加</Button>
        <Button priv="platform.user.edit" :disabled="selects.length!=1" icon="h-icon-edit" @click="editFirst">修改</Button>
        <Button priv="platform.user.edit" :disabled="selects.length!=1" icon="h-icon-edit" @click="alterPswd">修改密码</Button>
        <Poptip priv="platform.user.delete" :isdisabled="selects.length==0" class="h-btn" content="确定删除所选记录？"
                @confirm="del">
          <Button icon="h-icon-trash">删除</Button>
        </Poptip>
      </ButtonGroup>
      <input type="text" v-model="table.params.username" placeholder="用户名"/>
      <input type="text" v-model="table.params.name" placeholder="姓名"/>
      <TreePicker :option="branchOption" v-model="table.params.branchSn" placeholder="所属机构" useConfirm
                  filterable></TreePicker>
      <!-- 工具条 -->
      <ButtonGroup>
        <Button icon="h-icon-search" @click="reload"></Button>
      </ButtonGroup>
    </div>
    <div class="list">
      <Table :datas="table.data" :loading="table.loading" @trdblclick="edit" @select="selected" checkbox>
        <TableItem title="序号" prop="$serial" :width="50"></TableItem>
        <TableItem title="用户名" prop="username"></TableItem>
        <TableItem title="姓名" prop="name"></TableItem>
        <TableItem title="机构" prop="branchSn"></TableItem>
        <TableItem title="手机号" prop="phone" :width="120"></TableItem>
        <TableItem title="性别" prop="gender" :width="50"></TableItem>
        <TableItem title="状态" :width="100">
          <template slot-scope="{data}">
            <HSwitch v-model="data.enable" @change="switchStatus(data)">
              <span slot="open">启用</span>
              <span slot="close">禁用</span>
            </HSwitch>
          </template>
        </TableItem>
      </Table>
    </div>
    <div class="bar">
      <Pagination v-model="table.pagination" align="right" @change="reload"></Pagination>
    </div>
    <UserDialog ref="dlg" @change="reload">
    </UserDialog>
  </div>
</template>
<script>
import {DataSource, ajax, util} from 'framework'
import UserDialog from './userDialog'

let table = new DataSource('user/list', true)

export default {
  name: "User",
  components: {UserDialog},
  data() {
    return {
      table: table,
      selects: [],
      options: {},
      branchOption: {
        keyName: 'sn',
        parentName: 'psn',
        titleName: 'name',
        dataMode: 'list',
        datas: []
      },
    }
  }, mounted() {
    table.load()
    ajax.get("branch/list").then(r => {
      this.branchOption.datas = r.data;
    })
  },
  methods: {
    reload() {
      this.selects = []
      table.load()
    },
    search() {
      this.selects = []
      table.pagination.page = 1;
      table.load()
    },
    rowSelect(v) {
      this.selectRow = util.fields(v, 'id,username')
    },
    selected(v) {
      this.selects = v.map(it => util.fields(it, 'id,username'))
    },
    resetSerarch() {
      table.params = {}
      this.reload()
    },
    add() {
      this.$refs.dlg.show()
    },
    editFirst() {
      if (this.selects.length == 0) {
        return;
      }
      this.edit(this.selects[0])
    },
    edit(v) {
      if (!this.$priv('platform.user.edit')) {
        return;
      }
      this.$refs.dlg.show(util.fields(v, 'id'))
    },
    del() {
      ajax.post('user/delete', this.selects).then(r => {
        this.reload()
      })
    },
    //修改密码
    alterPswd() {
      if (this.selects.length == 0) {
        return;
      }
      let user=this.selects[0];
      this.$Prompt('请输入新密码').then(r=>{
        ajax.post("user/alterPassword",{username:user.username,password:r}).then(r=>{
          this.$Message("已修改")
          this.reload()
        }).catch(e=>{
          this.$Message({type:'error',text:'修改失败'})
        })
      })
    },
    //切换用户状态
    switchStatus(user){
      //console.log(user.enable)
      ajax.post("user/switchStatus",{username:user.username,enable:user.enable}).then(r=>{
        this.$Message("已切换")
        this.reload()
      }).catch(e=>{
        this.$Message({type:'error',text:'切换失败'})
      })
    }
  }
}
</script>
